import React from 'react';
import { Form, Select, Card, Breadcrumb, Icon, Radio, Checkbox, Button, Row, Col } from 'antd';
import axios from '../../components/Engineering/axios'

const { Option, OptGroup } = Select;
const { Item: FormItem } = Form;


class RadioFrom extends React.Component {
  state = {
    linkageChecked: true,
    linkageDisabled: false,

    defaultCheckedList: ['Apple', 'Orange'],
    indeterminate: true,
    checkAll: false,
  };

  componentDidMount() {
    setInterval(() => {
      this.setState({
        apple: !this.state.apple
      })
    }, 1000)
  }

  render() {
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },

      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      }
    }
    return (
      <>
        <Card title="checkbox 复选框" style={{ marginTop: 10 }}>


          <FormItem layout="horizontal" labelAlign="left" label="1.简单的 checkbox">
            <Checkbox onChange={(e) => alert(e.target.checked)}>Checkbox</Checkbox>
            <Checkbox onChange={(e) => alert(e.target.checked)} defaultChecked={false} disabled>Checkbox</Checkbox>
            <Checkbox onChange={(e) => alert(e.target.checked)} defaultChecked={true} disabled>Checkbox</Checkbox>
            <Checkbox onChange={(e) => alert(e.target.checked)} defaultChecked>Checkbox</Checkbox>
          </FormItem>

          <FormItem layout="horizontal" labelAlign="left" label="2.受控的 Checkbox">
            <div>
              <p style={{ marginBottom: '20px' }}>
                <Checkbox
                  checked={this.state.linkageChecked}
                  disabled={this.state.linkageDisabled}
                  onChange={(e) => this.setState({ linkageChecked: e.target.checked })}>
                  {this.state.linkageChecked ? '选中' : '未选中'}-{this.state.linkageDisabled ? '禁止' : '未禁止'}
                </Checkbox>
              </p>
              <p>
                <Button type="primary" size="small" onClick={() => this.setState({ linkageChecked: !this.state.linkageChecked })}>
                  {!this.state.linkageChecked ? '选中' : '未选中'}
                </Button>


                <Button style={{ marginLeft: '10px' }} type="primary" size="small" onClick={() => this.setState({ linkageDisabled: !this.state.linkageDisabled })}>
                  {!this.state.linkageDisabled ? '禁止' : '未禁止'}
                </Button>

              </p>
            </div>
          </FormItem>


          <FormItem layout="horizontal" labelAlign="left" label="3.在实现全选效果时，你可能会用到 indeterminate 属性">
            <>
              <div>
                {/* <div style={{borderBottom: '1px solid #E9E9E9'}}> */}
                <Checkbox
                  indeterminate={this.state.indeterminate}
                  onChange={(e) => this.setState({
                    defaultCheckedList: e.target.checked ? ['Apple', 'Pear', 'Orange'] : [],
                    indeterminate: false,
                    checkAll: e.target.checked,
                  })}
                  checked={this.state.checkAll}
                >
                  Check all
                </Checkbox>
              </div>
              <Checkbox.Group
                options={['Apple', 'Pear', 'Orange']}
                value={this.state.defaultCheckedList}
                onChange={(e) => this.setState({
                  defaultCheckedList: e,
                  indeterminate: !!this.state.defaultCheckedList.length && this.state.defaultCheckedList.length < ['Apple', 'Pear', 'Orange'].length,
                  checkAll: this.state.defaultCheckedList.length === ['Apple', 'Pear', 'Orange'].length,
                })}
              />
            </>
          </FormItem>


          <FormItem layout="horizontal" labelAlign="left" label="4.方便的从数组生成 Checkbox 组">
            <Checkbox.Group options={['Apple', 'Pear', 'Orange']} defaultValue={['Apple']}
              onChange={(e) => console.log('checked = ', e)} />
              <br/>
            <Checkbox.Group
              options={[{ label: 'Apple', value: 'Apple' }, { label: 'Orange', value: 'Orange', disabled: true },]}
              defaultValue={['Apple']} onChange={(e) => console.log('checked = ', e)} />
          </FormItem>


          <FormItem layout="horizontal" labelAlign="left" label="5.Checkbox.Group 内嵌 Checkbox 并与 Grid 组件一起使用，可以实现灵活的布局">
            <Checkbox.Group style={{ width: '100%' }} onChange={checkedValues => console.log('checked = ', checkedValues)}>
              <Row>
                <Col span={8}> <Checkbox value="A">A</Checkbox> </Col>
                <Col span={8}> <Checkbox value="B">B</Checkbox> </Col>
                <Col span={8}> <Checkbox value="C">C</Checkbox> </Col>
                <Col span={8}> <Checkbox value="D">D</Checkbox> </Col>
                <Col span={8}> <Checkbox value="E">E</Checkbox> </Col>
              </Row>
            </Checkbox.Group>
          </FormItem>




        </Card>


      </>
    )

  }
}

export default Form.create({ name: 'RadioFrom' })(RadioFrom)


// API#
// 属性#
// Checkbox#
// 参数	                        说明	类型	默认值	版本
// autoFocus	                  自动获取焦点	boolean	false	3.6.2
// checked	                    指定当前是否选中	boolean	false	3.6.2
// defaultChecked	              初始是否选中	boolean	false	3.6.2
// disabled	                    失效状态	boolean	false	3.6.2
// indeterminate	              设置 indeterminate 状态，只负责样式控制	boolean	false	3.6.2
// onChange	                    变化时回调函数	Function(e:Event)	-	3.6.2

// Checkbox Group#
// 参数	                        说明	类型	默认值	版本
// defaultValue	                默认选中的选项	string[]	[]	3.6.2
// disabled	                    整组失效	boolean	false	3.6.2
// name	                        CheckboxGroup 下所有 input[type="checkbox"] 的 name 属性	string	-	3.16.0
// options	                    指定可选项	string[]	[]	3.6.2
// value	                      指定选中的选项	string[]	[]	3.6.2
// onChange	                    变化时回调函数	Function(checkedValue)	-	3.6.2

// 方法#
// Checkbox#
// 名称	                        描述	版本
// blur()	                      移除焦点	3.6.2
// focus()	                    获取焦点	3.6.2
